<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>polyline</title>
</head>
<body>
<!--
    <polyline> 元素是用于创建任何只有直线的形状：
        坐标是以浏览器左上角为原点
        points 属性定义多边形每个角的 x 和 y 坐标 每个点坐标为x,y 每个点用空格间隔 例如：x1,y1 x2,y2
        style 属性用来定义 CSS 属性 分号隔开
            - CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
            - CSS 的 stroke-width 属性定义矩形边框的宽度
            - CSS 的 stroke 属性定义矩形边框的颜色
            - CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。
            - CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
            - CSS 的 stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
        SVG的图形填充规则通过fill-rule属性来指定。
            - 有效值：nonzero | evenodd
                - nonzero 字面意思是“非零”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点情况。从0开始计数，路径从左向右穿过射线则计数加1，从右向左穿过射线则计数减1。得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部。
                - evenodd 字面意思是“奇偶”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部，是偶数则认为点在外部。
            - 注：作的是射线，不是直线
-->
    <svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100vh">
        <polyline points="0,40 40,40 40,80 80,80 80,120 120,120" style="fill:white;stroke:red;stroke-width:4"/>

    </svg>
</body>
</html>
